﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Wijmo.Master" AutoEventWireup="true"
    CodeBehind="Animation.aspx.cs" Inherits="ControlExplorer.C1Gallery.Animation" %>

<%@ Register Assembly="C1.Web.Wijmo.Controls.3" Namespace="C1.Web.Wijmo.Controls.C1Gallery"
    TagPrefix="cc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Head" runat="server">

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <script type="text/javascript">
        $(document).ready(function () {
            var transitions = {
                animated: "fade",
                duration: 1000,
                easing: null
            }

            $('#<%=showEffectTypes.ClientID%>').change(function () {
                var ee = $("#<%=showEffectTypes.ClientID%> option:selected").val();
                $.extend(transitions, { animated: ee });
                $("#<%=Gallery.ClientID%>").c1gallery("option", "transitions", transitions);
            });
        });
    </script>
    <h3>
        动画</h3>
    <cc1:C1Gallery ID="Gallery" runat="server" ShowTimer="True" Width="750px" Height="256px"
        ThumbnailOrientation="Vertical" ThumbsDisplay="3" ShowPager="false">
        <Transitions>
            <Animated Disabled="false" Effect="slide" />
        </Transitions>
        <Items>
            <cc1:C1GalleryItem LinkUrl="http://lorempixum.com/750/300/sports/1" ImageUrl="http://lorempixum.com/200/150/sports/1" />
            <cc1:C1GalleryItem LinkUrl="http://lorempixum.com/750/300/sports/2" ImageUrl="http://lorempixum.com/200/150/sports/2" />
            <cc1:C1GalleryItem LinkUrl="http://lorempixum.com/750/300/sports/3" ImageUrl="http://lorempixum.com/200/150/sports/3" />
            <cc1:C1GalleryItem LinkUrl="http://lorempixum.com/750/300/sports/4" ImageUrl="http://lorempixum.com/200/150/sports/4" />
            <cc1:C1GalleryItem LinkUrl="http://lorempixum.com/750/300/sports/5" ImageUrl="http://lorempixum.com/200/150/sports/5" />
            <cc1:C1GalleryItem LinkUrl="http://lorempixum.com/750/300/sports/6" ImageUrl="http://lorempixum.com/200/150/sports/6" />
        </Items>
    </cc1:C1Gallery>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="Description" runat="server">
    <p>
        此示例展示了从一个图像转换到另一个图像时的动画效果。
    </p>
    这个功能通过下列属性支持：
    <ul>
        <li><b>Transitions</b></li>
    </ul>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ControlOptions" runat="server">
        <label for="showingEffectTypes">
            动画
        </label>
        <asp:DropDownList ID="showEffectTypes" runat="server">
            <asp:ListItem Value="blind" Selected="True">百叶窗</asp:ListItem>
            <asp:ListItem Value="clip">回形</asp:ListItem>
            <asp:ListItem Value="drop">由左侧隐入</asp:ListItem>
            <asp:ListItem Value="explode">爆炸</asp:ListItem>
            <asp:ListItem Value="fade">淡入/淡出</asp:ListItem>
            <asp:ListItem Value="fold">折叠</asp:ListItem>
            <asp:ListItem Value="highlight">高亮</asp:ListItem>
            <asp:ListItem Value="puff">张开</asp:ListItem>
            <asp:ListItem Value="pulsate">闪烁</asp:ListItem>
            <asp:ListItem Value="scale">右下角扩展/收缩</asp:ListItem>
            <asp:ListItem Value="size">左上角扩展/收缩</asp:ListItem>
            <asp:ListItem Value="slide">滑动</asp:ListItem>
        </asp:DropDownList>
</asp:Content>
